<template>
  <div>
    <!-- 主体内容 -->
    <div class="container">
      <div v-for="(item, d_id) in dairyDetail" :key="d_id">
        <img class="bc_img" :src="item.d_img" />
        <div class="bottom">
          <div class="user_row">
            <img class="user_touxiang" :src="item.d_img" alt="" />
            <span class="user_name">{{ item.d_man_name }}</span>
          </div>
          <p class="detail">{{ item.d_detail }}</p>
          <p class="fabu_time">发布于{{ item.d_time }}</p>
        </div>
      </div>

      <div class="go_back" @click="Go_back"><img src="../assets/img/jiyang/fanhui.png" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['d_id'],
  data() {
    return {
      //存储日记信息
      dairyDetail: [],
    };
  },
  methods: {
    getdairyDataByid() {
      const url = 'dairy/selectByid';
      let params = `d_id=${this.$route.query.d_id}`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        this.dairyDetail = res.data.data;
      });
    },

    Go_back() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.getdairyDataByid();
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #000;
  color: #ffffff;
  font-size: 1.4rem;

  .go_back {
    width: 4rem;
    height: 4rem;
    background-color: rgba($color: #ffffff, $alpha: 0.7);
    position: fixed;
    border-radius: 50%;
    top: 2rem;
    left: 2rem;

    img {
      width: 3rem;
      height: 3rem;
      padding: 1rem;
      padding-top: 0.5rem;
    }
  }
  .bc_img {
    // margin: 8rem 0;
    height: 100vh;
    width: 100vw;
    object-fit: scale-down;
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 2rem;
    .user_row {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      .user_touxiang {
        display: block;
        width: 3rem;
        height: 3rem;
        //裁减掉多余部分,不拉伸 不失真
        object-fit: cover;
        border-radius: 50%;
        background-color: white;
      }
      .user_name {
        margin-left: 1rem;
      }
    }
    .detail {
      margin-bottom: 1rem;
    }
    .fabu_time {
      padding-bottom: 1rem;
      font-size: 1.2rem;
      color: #bcbcbc;
    }
  }
}
</style>
